<template>
  <view :class="ns.b()">
    <IBizIcon
      v-if="rawItemType === 'IMAGE'"
      :class="ns.e('image')"
      :icon="rawItemContent"
    ></IBizIcon>
    <text v-if="rawItemType === 'TEXT' || rawItemType === 'RAW'" :class="ns.e('text')">
      {{ rawItemText }}
    </text>
    <text v-if="rawItemType === 'HEADING1'" :class="ns.e('h1')">
      {{ rawItemText }}
    </text>
    <text v-if="rawItemType === 'HEADING2'" :class="ns.e('h2')">
      {{ rawItemText }}
    </text>
    <text v-if="rawItemType === 'HEADING3'" :class="ns.e('h3')">
      {{ rawItemText }}
    </text>
    <text v-if="rawItemType === 'HEADING4'" :class="ns.e('h4')">
      {{ rawItemText }}
    </text>
    <text v-if="rawItemType === 'HEADING5'" :class="ns.e('h5')">
      {{ rawItemText }}
    </text>
    <text v-if="rawItemType === 'HEADING6'" :class="ns.e('h6')">
      {{ rawItemText }}
    </text>
    <text v-if="rawItemType === 'PARAGRAPH'" :class="ns.e('paragraph')">
      {{ rawItemText }}
    </text>
    <text v-if="rawItemType === 'HTML'" :class="ns.e('paragraph')">
      {{ rawItemText }}
    </text>
    <video v-if="rawItemType === 'VIDEO'" :class="ns.e('video')">视频</video>
    <view v-if="rawItemType === 'DIVIDER'" :class="ns.e('divider')">分割线</view>
    <view v-if="rawItemType === 'INFO' || rawItemType === 'WARNING' || rawItemType === 'ERROR'">
      提示消息
    </view>
    <view v-if="rawItemType === 'MARKDOWN'">MARKDOWN</view>
  </view>
</template>
<script setup lang="ts">
import { defineComponent, PropType, Ref, ref, watch } from 'vue'
import { createUUID } from 'qx-util'
import {
  IHtmlItem,
  IPanelRawItem,
  IRawItemBase,
  IRawItemContainer,
  ISysImage,
  ITextItem,
} from '@ibiz/model-core'
import { showTitle } from '@ibiz-template/core'
import { useNamespace } from '@/use'
// import { parseHtml } from '@/utils'

const props = defineProps({
  type: {
    type: String,
    required: false,
  },
  content: {
    type: [String, Object, Number],
  },
  rawItem: {
    type: Object as PropType<IRawItemContainer>,
    required: false,
  },
})

const ns = useNamespace('rawitem')
let tempRawItem: IRawItemBase | null = null
let contentType = ''
if (props.rawItem) {
  tempRawItem = props.rawItem.rawItem!
  contentType = tempRawItem.contentType!
}
const rawItemType = ref(props.type || contentType || '')
const rawItemContent: Ref<string | number | IData> = ref('')
let sysImage: ISysImage | undefined
if (contentType === 'IMAGE') {
  sysImage = (tempRawItem as IPanelRawItem).sysImage
}
// 传入内容
if (contentType === 'RAW' || contentType === 'HTML') {
  if (contentType === 'RAW') {
    rawItemType.value = 'TEXT'
    rawItemContent.value = (tempRawItem as ITextItem).caption!
  } else {
    rawItemContent.value = (tempRawItem as IHtmlItem).content!
  }
} else if (['VIDEO', 'DIVIDER', 'INFO', 'WARNING', 'ERROR'].includes(contentType!)) {
  // 暂不支持
  // content = rawContent;
} else if (contentType === 'IMAGE' && sysImage) {
  rawItemContent.value = sysImage
}

// 判断传入是否为图片路径
const isImg = (imgUrl: string) => {
  const reg = /^https?:|^http?:|(\.png|\.svg|\.jpg|\.png|\.gif|\.psd|\.tif|\.bmp|\.jpeg)/
  return reg.test(imgUrl)
}

// 判断传入是否为html字符
const isHtmlStr = (str: string) => {
  try {
    const fragment = new DOMParser().parseFromString(str, 'text/html')
    return fragment.body.children.length > 0
  } catch (error) {
    return false
  }
}

// 视频类型内容参数
const playerParams = ref({
  id: createUUID(),
  path: '',
  mute: true,
  autoplay: true,
  replay: false,
  showcontrols: true,
})

// 分割线类型参数
const dividerParams = ref({
  contentPosition: 'center',
  html: '',
})

// 类型参数
const alertParams = ref({
  type: 'info',
  title: '',
  closeabled: true,
  showIcon: false,
})

// 文本类型显示值
const rawItemText: Ref<string | number | IData> = ref('')

// 转换各类值操作
const convertValue = () => {
  // 图片类型
  if (rawItemType.value === 'IMAGE') {
    if (props.content && typeof props.content === 'string') {
      if (isImg(props.content)) {
        rawItemContent.value = { imagePath: props.content }
      } else {
        rawItemContent.value = { cssClass: props.content }
      }
    } else if (sysImage) {
      rawItemContent.value = sysImage
    }
  }

  // 文本类型
  if (
    [
      'TEXT',
      'HEADING1',
      'HEADING2',
      'HEADING3',
      'HEADING4',
      'HEADING5',
      'HEADING6',
      'PARAGRAPH',
      'HTML',
      'RAW',
    ].includes(rawItemType.value)
  ) {
    rawItemText.value = rawItemContent.value
    if (typeof rawItemText.value === 'string') {
      const val = rawItemText.value
      rawItemText.value = val
        .replace(/&lt;/g, '<')
        .replace(/&gt;/g, '>')
        .replace(/&amp;nbsp;/g, ' ')
        .replace(/&nbsp;/g, ' ')
    }
  }

  // 适配html类型但并非html字符串换行符识别异常
  if (rawItemType.value === 'HTML' && !isHtmlStr(rawItemText.value as string)) {
    rawItemText.value = (rawItemText.value as string).replace(/\n/g, '<br>')
  }
  // TODO 解析表情内容
  // if (rawItemType.value === 'HTML') {
  //   rawItemText.value = parseHtml(rawItemText.value as string)
  // }

  if (['VIDEO', 'DIVIDER', 'INFO', 'WARNING', 'ERROR'].includes(rawItemType.value)) {
    if (rawItemContent.value) {
      let rawConfig = {}
      try {
        if (typeof rawItemContent.value === 'string') {
          // eslint-disable-next-line no-new-func
          const func = new Function(`return (${rawItemContent.value});`)
          rawConfig = func()
          switch (rawItemType.value) {
            case 'VIDEO':
              Object.assign(playerParams.value, rawConfig)
              break
            case 'DIVIDER':
              Object.assign(dividerParams.value, rawConfig)
              break
            case 'INFO':
            case 'WARNING':
            case 'ERROR':
              alertParams.value.type = rawItemType.value.toLocaleLowerCase()
              Object.assign(alertParams.value, rawConfig)
              break
            default:
              break
          }
        }
      } catch {
        ibiz.log.error(
          ibiz.i18n.t('component.rawItem.errorConfig', {
            type: rawItemType.value,
          }),
        )
      }
    }
  }
}

convertValue()

watch(
  () => props.content,
  (newVal, oldVal) => {
    if (newVal && newVal !== oldVal) {
      rawItemContent.value = newVal as string | number
      convertValue()
    }
  },
  {
    immediate: true,
  },
)
</script>
<style lang="scss">
@include b(rawitem) {
  width: 100%;
  height: 100%;
  font-size: getCssVar(font-size, regular);
  color: getCssVar(editor, default, text-color);

  @include b(icon) {
    width: 100%;
    height: 100%;
  }
}
</style>
